/* 导航菜单 */

$(function () {
    // 设置本地存储，记录激活的导航菜单 
    if (!sessionStorage.getItem('activeMenu')) {
      sessionStorage.setItem('activeMenu', "0-0");
    }
  
    // 因为每一个静态页面，跳转之后，都会重新渲染导航，所以要重新绑定导航索引。
    let arr = $(".menu > li");
    arr.each(function (i, item) {
      // 1. 设置一个内联的高度,动态设置所有导航菜单中LI的高度，才可以增加折叠的动画效果。
      $(item).css('height', $(item).height() + 'px')
      // 2. 设置一级导航的索引号
      $(item).attr('data-index', i);
  
      // 3. 添加索引号，如果是动态导航菜单，这可以不加。
      $(item).children().each((i2, item) => {
        // console.log(i2);
        //3.1 设置二级导航索引号
        $(item).attr('data-index', i + '-' + i2)
        //3.2 给每一个DIV子菜单，添加一个单击事件，
        $(item).on('click', function (e) {
          // e.preventDefault();
          //3.2.1 获取本地存储中，上一次点击的导航菜单的索引,通过循环找到后，清除激活样式
          let str = sessionStorage.getItem('activeMenu');
          $('.menu div').each((i, item) => {
            // 如果你点的是一级导航，就不取消二级导航的激活样式，只有当点的是二级导航时，并且DIV的data-index与本地存储相等时，才取消激活样式
            if ( $(this).attr('data-index').split('-')[1] !== '0' && $(item).attr('data-index') === str) {
              $(item).removeClass('active')
            }
          })
          // 3.2.2 记录当前点击的导航菜单的索引
  
          sessionStorage.setItem('activeMenu', $(this).attr('data-index'))
          // 3.2.3 设置激活的样式, 一级导航不用添加
          if (str.split('-')[1] !== '0') {
            $(this).addClass('active') 
          }
  
        })
      })
    })
  
    // 在每个页面设置好索引号后，再去拿本地存储的值，再设置激活的导航。
    let str = sessionStorage.getItem('activeMenu');
    $('.menu div').each((i, item) => {
      if ($(item).attr('data-index') === str) {
        $(item).addClass('active')
      }
    })
  });
  
  // 2. 展开或折叠导航
  $(".menu div:first-child").on('click', function () {
  
    // 获取LI的高度
    let height = $(this).parent().height();
    // $(this).parent().css({ height: height + 'px' })
  
    // 控制三角形，通过判断LI高度，调整icon状态
    let angleDown = $(this).find('.fa-angle-down');
    height !== 50 ? angleDown.css('transform', 'rotate(180deg)') : angleDown.css('transform', 'rotate(0deg)')
  
    // 修改为展开或者折叠
    let len = $(this).parent().children().length;
    height = height !== 50 ? 50 + 'px' : height * len + 'px';
    $(this).parent().css({ height })
  });
  
  // 3. 退出系统
  $("#exitSystem").on('click', function () {
    sessionStorage.removeItem('userInfo')
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('activeMenu')
  
  
    location.href = "./../index.html"
  })
  
  // 更新左上角的用户名称。
  let username = sessionStorage.getItem('userInfo')  && JSON.parse(sessionStorage.getItem('userInfo') ).uname;
  $("#usernickname").text(username);